<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="">
<meta name="description" content="">
<title>template2</title>
<link rel="stylesheet" type="text/css" href="css/templates2.css">
</head>
<body>
<div class="page layout-lm">
    <div class="wrap-header">
        <div id="header"><div class="inner-header">
            <a id="logo" href="#"><img src="http://placehold.it/200x100&text=logo" alt=""></a>
            <strong class="visually-hidden">网站名称</strong>
        </div></div>
    </div><!--wrap-header-->
    <div class="wrap-nav">
        <div id="nav">
            <ul class="inline-float">
                <li class="active"><a href="">首页</a></li>
                <li><a href="">sassCore</a></li>
                <li><a href="">布局模板</a></li>
                <li><a href="">基础样式</a></li>
                <li><a href="">常用结构</a></li>
                <li><a href="">js交互</a></li>
                <li><a href="">关于/联系</a></li>
            </ul>
            <div class="search-block">
                <form action="#" class="form-search-block">
                    <input type="search" class="search-text">
                    <input type="submit" value="搜索" class="search-submit">
                </form>
            </div>
        </div>
    </div><!--wrap-nav-->
    <div class="wrap-container">
        <div id="container" class="clearfix">
            <div id="aside_first" class="aside"><div class="inner-aside">
                <div id="aside_nav_block" class="aside-block">
                    <div class="block-bd">
                        <ul class="aside-nav">
                            <li><a href="#">文字排版</a></li>
                            <li><a href="#">表格</a></li>
                            <li><a href="#">表单</a></li>
                            <li><a href="#">按钮</a></li>
                            <li><a href="#">简单表格/按钮/表单</a></li>
                            <li><a href="#">图片</a></li>
                        </ul>
                    </div>
                </div>
            </div></div>
            <div id="main"><div class="inner-main">
                <div id="breadcrumb">
                  <a href="/">首页</a>
                  <span class="divider">&gt;</span>
                  <span class="current">列表页</span>
                </div>
                <div id="list_page">
                  <h1 class="visually-hidden">列表页</h1>
                  <ul class="imgtitle-list">
                    <li><a href="#"><img alt="" src="http://placehold.it/171x161"><strong class="ellipsis" title="我是标题超出隐藏">我是标题超出隐藏</strong></a></li>
                    <li><a href="#"><img alt="" src="http://placehold.it/171x161"><strong class="ellipsis" title="我是标题超出隐藏">我是标题超出隐藏</strong></a></li>
                    <li><a href="#"><img alt="" src="http://placehold.it/171x161"><strong class="ellipsis" title="我是标题超出隐藏">我是标题超出隐藏</strong></a></li>
                    <li><a href="#"><img alt="" src="http://placehold.it/171x161"><strong class="ellipsis" title="我是标题超出隐藏">我是标题超出隐藏</strong></a></li>
                    <li><a href="#"><img alt="" src="http://placehold.it/171x161"><strong class="ellipsis" title="我是标题超出隐藏">我是标题超出隐藏</strong></a></li>
                    <li><a href="#"><img alt="" src="http://placehold.it/171x161"><strong class="ellipsis" title="我是标题超出隐藏">我是标题超出隐藏</strong></a></li>
                    <li><a href="#"><img alt="" src="http://placehold.it/171x161"><strong class="ellipsis" title="我是标题超出隐藏">我是标题超出隐藏</strong></a></li>
                    <li><a href="#"><img alt="" src="http://placehold.it/171x161"><strong class="ellipsis" title="我是标题超出隐藏">我是标题超出隐藏</strong></a></li>
                    <li><a href="#"><img alt="" src="http://placehold.it/171x161"><strong class="ellipsis" title="我是标题超出隐藏">我是标题超出隐藏</strong></a></li>
                    <li><a href="#"><img alt="" src="http://placehold.it/171x161"><strong class="ellipsis" title="我是标题超出隐藏">我是标题超出隐藏</strong></a></li>
                    <li><a href="#"><img alt="" src="http://placehold.it/171x161"><strong class="ellipsis" title="我是标题超出隐藏">我是标题超出隐藏</strong></a></li>
                    <li><a href="#"><img alt="" src="http://placehold.it/171x161"><strong class="ellipsis" title="我是标题超出隐藏">我是标题超出隐藏</strong></a></li>
                  </ul>
                  <div class="paging">
                    <ul>
                      <li class="disabled prev"><span>上一页</span></li>
                      <li class="active"><span>1</span></li>
                      <li><span>...</span></li>
                      <li><a href="#">7</a></li>
                      <li><a href="#">8</a></li>
                      <li><a href="#">9</a></li>
                      <li><span>...</span></li>
                      <li><a href="#">10</a></li>
                      <li class="next"><a href="#">下一页</a></li>
                    </ul>
                  </div>                  
                </div>
            </div></div><!--main-->
        </div>
    </div><!--wrap-container-->
    <div class="wrap-footer">
        <div id="footer"><div class="inner-footer">
            <div class="footer-columns">
              <div class="col-four">
                <div class="col">
                  <h2>神莫大于化道</h2>
                  <div class="col-content">故不登高山，不知天之高也；不临深溪，不知地之厚也；不闻先王之遗言，不知学问之大也。干、越、夷、貉之子，生而同声，长而异俗，教使之然也。诗曰：“嗟尔君子，无恒安息。靖共尔位，好是正直。神之听之，介尔景福。”神莫大于化道，福莫长于无祸。</div>
                </div>
                <div class="col">
                  <h2>神莫大于化道</h2>
                  <div class="col-content">故不登高山，不知天之高也；不临深溪，不知地之厚也；不闻先王之遗言，不知学问之大也。干、越、夷、貉之子，生而同声，长而异俗，教使之然也。诗曰：“嗟尔君子，无恒安息。靖共尔位，好是正直。神之听之，介尔景福。”神莫大于化道，福莫长于无祸。</div>
                </div>
                <div class="col">
                  <h2>神莫大于化道</h2>
                  <div class="col-content">故不登高山，不知天之高也；不临深溪，不知地之厚也；不闻先王之遗言，不知学问之大也。干、越、夷、貉之子，生而同声，长而异俗，教使之然也。诗曰：“嗟尔君子，无恒安息。靖共尔位，好是正直。神之听之，介尔景福。”神莫大于化道，福莫长于无祸。</div>
                </div>
                <div class="col">
                  <h2>神莫大于化道</h2>
                  <div class="col-content">故不登高山，不知天之高也；不临深溪，不知地之厚也；不闻先王之遗言，不知学问之大也。干、越、夷、貉之子，生而同声，长而异俗，教使之然也。诗曰：“嗟尔君子，无恒安息。靖共尔位，好是正直。神之听之，介尔景福。”神莫大于化道，福莫长于无祸。</div>
                </div>                                          
              </div>
            </div>
            <div class="copyright">
              <p>版权所有：<a href="http://w3cplus.com" target="_blank">w3cplus</a>，作者：<a href="http://weibo.com/2150465537" target="_blank">结一</a></p>
              <p>感谢<a href="http://weibo.com/311290005" target="_blank">大漠</a>，星河棋士及<a href="www.weibo.com/lcllao" target="_blank">Lcllao</a>的支持与帮助。</p>              
            </div>
        </div></div>
    </div><!--wrap-footer-->
</div>     
</body>
</html>